import React, { useEffect, useState } from 'react'
import { useNavigate, useLocation, } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux"
import { ITEMTYPE, ALLSTATE } from "../../types/store.d"
import * as Action from "../../actions/index"
import { NavBar, Toast, ActionBar, Image, Loading } from 'react-vant';
import { CartO, ChatO, Star } from '@react-vant/icons';
import { DETAILTYPE } from "../../types/val.d"
import _ from "lodash"
interface DATATYPE {
  dataScrop: ITEMTYPE
}

function Address(props: DATATYPE) {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const location = useLocation()
  const [detailData, setdetailData] = useState<DETAILTYPE>({});
  useEffect(() => {
    setdetailData(location.state as DETAILTYPE)
  })
  const goShopcar = _.debounce(() => {
    dispatch(Action.add_Shopcar(location.state as DETAILTYPE))
    navigate("/home/classify");
  }, 2000)
  const shopArr = useSelector((state: ALLSTATE) => {
    return state.shopArr
  })
  return (
    <div>
      <NavBar
        title="商品详情"
        leftText="返回"
        rightText="按钮"
        onClickLeft={() => navigate("/")}
        onClickRight={() => Toast('按钮')}
      />
      <div>
        <Image src={detailData.img} loadingIcon={<Loading type="spinner" />} />
        <p>{detailData.title}</p>
        <p>￥{detailData.price}</p>
      </div>
      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO color="red" />} text="客服" />
          <ActionBar.Icon icon={<CartO color="red" />} badge={{ content: shopArr.length }} text="购物车" />
          <ActionBar.Icon icon={<Star color="red" />} text="店铺" />
          <ActionBar.Button type="warning" text="加入购物车" onClick={() => goShopcar()} />
          <ActionBar.Button type="danger" text="立即购买" />
        </ActionBar>
      </div>
    </div>
  )
}

export default Address
